<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点我试试</button>
    <ul>
        <li>1</li>
        <li class="box">2</li>
        <li>3</li>
        <li>4</li>
        <li>5
            <a href="https://www.baidu.com">百度</a>

        </li>
        <li class="box">6</li>
        <li class="box">7</li>
        <li name="haha">8</li>
        <li name="haha">9</li>
        <li>10</li>

    </ul>

    <p>你是铃儿</p>
    <p>我是叮当</p>
    <p>铃儿响叮当</p>

    <input type="text">
    <input type="password">

    <script>
        /* 
            js 把标签分成两类 

            1.非常规元素 
                html    document.documentElement
                head    document.head
                body    document.body

            2.常规元素
                // 根据id 获取
                // 语法:document.getElementById('id名');
                // 返回值:
                //       如果页面上有该id名字 那么就返回这一个元素
                //       如果没有该id的名字   那么就返回null 
                // 根据class 获取 
                // 语法:
                        document.getElementsByClassName('类名');
                // 返回值:
                //       如果页面上有该类名 那么有多少个元素返回多少个 
                //       结果是个伪数组 
                //       如果页面上没有该类名 返回空的伪数组          
                // 根据 name 获取  
                // 语法:
                        document.getElementsByName('name名');
                // 返回值:
                //       如果页面上有该name属性 那么有多少个元素返回多少个 
                //       结果是个伪数组 
                //       如果页面上没有该name属性 返回空的伪数组    


                // 根据 标签名 获取 

                // 语法:
                        document.getElementsByTagName('标签名');
                // 返回值:
                //       如果页面上有该标签名 那么有多少个元素返回多少个 
                //       结果是个伪数组 
                //       如果页面上没有该标签名 返回空的伪数组    


                // 根据 选择器 
                // https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors



                // document.querySelector('选择器');
                // 返回值:
                //      1.如果存在该选择器的元素 返回符合条件的第一个 
                //      2.如果不存在返回null  


                // document.querySelectorAll('选择器');
                // 返回值:
                //      1.如果存在该选择器的元素 有多少返回多少  伪数组 
                //      2.如果不存在返回 空的伪数组 







        
        
        
        
        
        */


        // id  
        // var btnEle = document.getElementById('btn');
        // console.log(btnEle);


        // class

        // var liEles = document.getElementsByClassName('box');
        // console.log(liEles);// 伪数组 长的像数组 可以使用数组的方式处理  
        // //HTMLCollection(3) [li.box, li.box, li.box]

        // name 
        // var  liele = document.getElementsByName('haha');
        // console.log(liele);

        //NodeList(2) [li, li]

        // 标签名 
        // var pele = document.getElementsByTagName('p');
        // console.log(pele);

        // //HTMLCollection(3) [p, p, p]



        // 选择器 

        // var btnele = document.querySelector('#btn');
        // console.log(btnele);

        // var lieles = document.querySelectorAll('.box');
        // console.log(lieles); // NodeList(3) [li.box, li.box, li.box]

        // var pele = document.querySelectorAll('p');
        // console.log(pele); //NodeList(3) [p, p, p]
        


        // var inpEle = document.querySelectorAll('input[type=text]')
        // console.log(inpEle); //NodeList(3) [p, p, p]


        // var tagEle = document.querySelectorAll('[name]')
        // console.log(tagEle);  // 所有具备name属性的元素

        // var liele = document.querySelectorAll('ul > li:nth-child(3)');
        // console.log(liele);


        //  var liele = document.querySelectorAll('ul li a');
        // console.log(liele);



        // id  和  querySelector 返回的是一个元素  


        // 其它都是伪数组  



        // getElementsByClassName  getElementsByTagName 
        // 得到伪数组 HTMLCollection


        
        // getElementsByName  和 querySelectorAll
        //  得到的伪数组 NodeList



        


    </script>
</body>
</html>